<template>
  <wd-toast />

  <wd-popup
    v-model="show"
    position="center"
    custom-style="width:100%;height:100%;background-color:#000;"
  >
    <view class="video-container">
      <hic-video-player
        :id="item?.id.toString()"
        :src="item?.filePath"
        :autoplay="true"
        :controls="true"
        :custom="true"
        :playbackrate="true"
        :show-playlist-btn="true"
        custom-name="更多"
        :only-show-custom-in-fullscreen="false"
        @ended="onEnded"
        @showplaylist="onShowPlaylist"
      >
        <template #custom>
          <view class="video-controls">
            <view class="control-group">
              <wd-loading v-if="loadingPrev" color="#fff" size="40rpx" />
              <wd-icon v-else name="previous" color="#fff" size="50rpx" @click="onPrev" />
            </view>
            <view class="control-group">
              <wd-loading v-if="loadingNext" color="#fff" size="40rpx" />
              <wd-icon v-else name="next" color="#fff" size="50rpx" @click="onNext" />
            </view>
          </view>
        </template>
      </hic-video-player>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup>
defineProps({
  item: Object,
  loadingPrev: Boolean,
  loadingNext: Boolean,
})

const show = defineModel<boolean>('showVideoPlayer', { required: true, default: false })

const emit = defineEmits(['end', 'show-playlist', 'prev', 'next', 'update:show'])

const onEnded = () => emit('end')
const onShowPlaylist = () => emit('show-playlist')
const onPrev = () => emit('prev')
const onNext = () => emit('next')
</script>

<style scoped>
.video-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-controls {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 40rpx;
}

.control-group {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  padding: 12rpx 24rpx;
}
</style>
